<template>
    <view>
        <z-paging ref="paging" :auto="false" v-model="dataList" @query="queryList" @onRefresh="onRefresh">
            <template slot="top">
                <view class="cu-bar search bg-white">
                    <view class="search-form">
                        <input :adjust-position="false" type="text" @search="handleSearch"
                            v-model="searchData.keyWord" placeholder="请输入巡查情况/巡查区域/处置结果关键字" confirm-type="search" />
                        <u-icon name="search" color="#999" size="20" @click="handleSearch"></u-icon>
                    </view>
               <!-- <view class="search-form">
                    <input :adjust-position="false" type="text" @search="handleSearch"
                        v-model="searchData.residentName" placeholder="请输入搜索关键字" confirm-type="search" />
                    <u-icon name="search" color="#999" size="20" @click="handleSearch"></u-icon>
                </view> -->
                </view>
            </template>
            <view class="cu-card">
                <view class="cu-item shadow" v-for="item in dataList" :key="item.id">
                    <LogItem :data="item"></LogItem>
                </view>
            </view>
			<uni-fab ref="fab"  horizontal="right" vertical="bottom" :popMenu="false"
						 @fabClick="fabClick" />
        </z-paging>
    </view>
</template>

<script>
import * as PatrolLogApi from "@/api/patrolLog.js"
// import * as TaskApi from "@/api/task.js"
import LogItem from "./log-item.vue"
export default {
    components: { LogItem },
    data() {
        return {
           
            pickerList: [],
            pickerText: '全部',
            searchData: {
                keyWord: '',
            },
        
            dataList: []
        }
    },
    
    onShow() {
      this.dataList = []
      this.$refs.paging.reload(true)
    },
    methods: {
        onRefresh() {
            console.log('this.onRefresh');
        },
        async queryList(pageNo, pageSize) {
            try {
                const res = await PatrolLogApi.getPatrolLogPage({
                    pageNo,
                    pageSize,
                    ...this.searchData,
                })
                this.$refs.paging.complete(res.data.list)
            } catch (e) {
                this.$refs.paging.complete(false)
            }
        },
      
        handleSearch() {
            this.$refs.paging.reload(true)
        },
		fabClick() {
			uni.navigateTo({
				url: '/pages/patrolLog/edit/index'
			})
			}
      
    }
}
</script>

<style lang="scss">
page {
    background-color: #F6F6F6;
.cu-bar .search-form {
    background-color: #f5f5f5;
    line-height: 64rpx;
    height: 64rpx;
    font-size: 24rpx;
    color: #333333;
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 28rpx;
    margin: 0 14rpx 0 32rpx;
    padding: 0 30rpx;
}
    .cu-card>.cu-item {
        border-radius: 8rpx;
        margin: 32rpx 0;
        background-color: transparent;
    }

    .search {
        border-top: 2rpx solid #EEEEEE;
        height: 88rpx;
    }

    .cu-btn {
        width: 208rpx;
        background: #F3F3F3;
        border-radius: 28rpx;
        padding: 0;
    }
}
</style>